<template>
    <jb-crud-page
        ref="wechatPage"
        title-icon="ic:round-manage-accounts"
        title-text="微信公众平台管理"
        search-url="/api/admin/wechatMpinfo/datas"
        :search-conditions="pageConditions"
        :edit-component="WechatEdit"
    >
        <template #conditions-form>
            <n-input
                v-model:value="pageConditions.keywords"
                type="text"
                style="width: 130px"
                placeholder="输入关键字搜索"
            />
            <jb-select
                v-model:value="pageConditions.type"
                placeholder="=类型="
                url="/api/admin/wechatMpinfo/typeOptions"
                class="max-w-100px"
                filterable
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.subjectType"
                placeholder="=主体类型="
                class="w-120px"
                url="/api/admin/wechatMpinfo/subjectTypeOptions"
                filterable
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.isAuthenticated"
                placeholder="=认证="
                class="w-120px"
                url="/api/admin/wechatMpinfo/isAuthenticatedOptions"
                filterable
            >
            </jb-select>
            <jb-select
                v-model:value="pageConditions.enable"
                placeholder="=状态="
                class="w-120px"
                url="/api/admin/wechatMpinfo/enableOptions"
                filterable
            >
            </jb-select>
        </template>
        <template #opt>
            <jb-btn
                :icon="Icons.ADD"
                ghost
                type="primary"
                @click="wechatPage?.showEditModal('新增公众平台')"
            >
                新增
            </jb-btn>
        </template>
        <template #default="{ tableStartIndex, list }">
            <jb-table
                ref="tableRef"
                :start-index="tableStartIndex"
                :data="list"
                :row-config="{ height: 80 }"
            >
                <jb-column type="seq" title="序号" width="60"></jb-column>
                <jb-column field="logo" title="头像" width="120">
                    <template #default="{ row }">
                        <jb-avatar :src="row.logo"></jb-avatar>
                    </template>
                </jb-column>
                <jb-column field="name" title="名称" min-width="300"></jb-column>

                <jb-column field="qrcode" title="二维码" width="120">
                    <template #default="{ row }">
                        <jb-avatar
                            v-if="row.qrcode"
                            :src="row.qrcode"
                            :round="false"
                        ></jb-avatar>
                        <span v-else>-</span>
                    </template>
                </jb-column>
                <jb-column field="typeName" title="类型 | 主体" width="120"> </jb-column>
                <jb-column field="briefInfo" title="简介" width="140">
                    <template #default="{ row }">
                        <jb-btn
                            v-if="row.briefInfo"
                            type="primary"
                            :icon="Icons.EYE"
                            ghost
                            :modal-title="`查看${row.name}简介`"
                            :modal-html="row.briefInfo"
                            :modal-args="{
                                negativeText: '',
                                positiveText: ''
                            }"
                        >
                            查看
                        </jb-btn>
                        <span v-else>-</span>
                    </template>
                </jb-column>
                <jb-column field="remark" title="备注" width="140">
                    <template #default="{ row }">
                        <jb-btn
                            v-if="row.remark"
                            type="primary"
                            :icon="Icons.EYE"
                            ghost
                            :modal-title="`查看${row.name}备注`"
                            :modal-html="row.remark"
                            :modal-args="{
                                negativeText: '',
                                positiveText: ''
                            }"
                        >
                            查看
                        </jb-btn>
                        <span v-else>-</span>
                    </template>
                </jb-column>
                <jb-column field="enable" title="是否启用" width="80">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.enable"
                            :url="`/api/admin/wechatMpinfo/toggleEnable/${row.id}`"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column field="isAuthenticated" title="认证" width="120">
                    <template #default="{ row }">
                        <jb-switch
                            v-model:value="row.isAuthenticated"
                            field-name="isAuthenticated"
                            :url="`/api/admin/wechatMpinfo/toggleIsAuthenticated/${row.id}`"
                        ></jb-switch>
                    </template>
                </jb-column>
                <jb-column title="核心配置" width="100">
                    <template #default="{ row }">
                        <jb-btn
                            ref="sysNoticeRef"
                            icon="carbon:settings-edit"
                            quaternary
                            circle
                            tip-text="核心配置"
                            :drawer-component="AppConfig"
                            drawer-title="核心配置"
                            drawer-positive-text=""
                            :drawer-component-props="{
                                id: row.id,
                                info: row
                            }"
                            :drawer-args="{
                                negativeText: '关闭',
                                defaultWidth: '1400',
                                resizable: true,
                                drawerClass: 'user_msg_tips'
                            }"
                            @drawer-yes-click=""
                        >
                        </jb-btn>

                        <jb-btn
                            v-if="!row.enable"
                            class="ml-8px"
                            tip-text="清空所有配置"
                            icon="icon-park-solid:clear"
                            type="error"
                            quaternary
                            circle
                            strong
                            confirm-text="确定清空所有配置"
                            :url="`/api/admin/wechatMpinfo/clearAllConfigs/${row.id}`"
                            @success="wechatPage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
                <jb-column title="关联应用" min-width="200">
                    <template #default="{ row }">
                        <jb-btn
                            ref="saveBtn"
                            class="ml-8px mr-8px"
                            type="primary"
                            quaternary
                            size="small"
                            tip-text="关联对象"
                            circle
                            icon="mingcute:link-fill"
                            :drawer-component="Rrelevancy"
                            drawer-title="公众平台-应用开发中心关联设置"
                            :drawer-args="{
                                width: '1200px'
                            }"
                            drawer-positive-text=""
                            :drawer-component-props="{
                                id: row.id
                            }"
                            @modal-yes-click=""
                        >
                        </jb-btn>
                    </template>
                </jb-column>
                <jb-column title="操作" fixed="right" width="120">
                    <template #default="{ row }">
                        <jb-btn
                            tip-text="编辑"
                            icon="uil:edit-alt"
                            secondary
                            type="warning"
                            quaternary
                            circle
                            strong
                            @click="
                                wechatPage?.showEditModal('编辑公众平台信息', {
                                    id: row.id
                                })
                            "
                        ></jb-btn>
                        <jb-btn
                            tip-text="删除"
                            icon="ant-design:delete-filled"
                            secondary
                            type="error"
                            quaternary
                            circle
                            strong
                            class="ml-16px"
                            confirm-text="确定删除这条数据？"
                            :url="`/api/admin/wechatMpinfo/delete/${row.id}`"
                            @success="wechatPage?.loadData()"
                        ></jb-btn>
                    </template>
                </jb-column>
            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icons } from '@/constants'
import JbCrudPage from '@/components/_builtin/jb-crud-page/index.vue'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import AppConfig from '@/views/_builtin/development/wechat/components/config-modal/index.vue'
import JbBtn from '@/components/_builtin/jb-btn/index.vue'
import WechatEdit from './components/wechat-edit/index.vue'
import Rrelevancy from './components/relevancy/index.vue'

const wechatPage = ref<InstanceType<typeof JbCrudPage> | null>(null)
const pageConditions = useResetableData({
    keywords: '',
    type: '',
    subjectType: '',
    isAuthenticated: '',
    enable: ''
})
</script>

<style scoped></style>
